<mat-table [dataSource]="dataSource">

  <ng-container cdkColumnDef="source">
    <mat-header-cell *cdkHeaderCellDef [ngClass]="'nameWidth'">Name</mat-header-cell>
    <mat-cell *cdkCellDef="let row" [ngClass]="'nameWidth'">
      <mat-form-field>
        <input matInput #text
               [ngModel]="row.key"
               (change)="doChange(row,$event.target.value)">
      </mat-form-field>
    </mat-cell>
  </ng-container>

  <ng-container cdkColumnDef="mapped">
    <mat-header-cell *cdkHeaderCellDef [ngClass]="'valueWidth'">Value</mat-header-cell>
    <mat-cell *cdkCellDef="let row" [ngClass]="'valueWidth'">
      <app-input field="row.key" [change]="service.attributeNameFormats" [orig]="original && original.attributeNameFormats">
        <mat-form-field>
          <mat-select [(ngModel)]="service.attributeNameFormats[row.key]">
            <mat-option *ngFor="let item of data.formData.attributeNameFormats" [value]="item">
              {{item}}
            </mat-option>
          </mat-select>
          <mat-hint align="end">
            <app-hint></app-hint>
          </mat-hint>
        </mat-form-field>
      </app-input>
    </mat-cell>
  </ng-container>

  <ng-container cdkColumnDef="delete">
    <mat-header-cell *cdkHeaderCellDef [ngClass]="'actionWidth'"></mat-header-cell>
    <mat-cell *cdkCellDef="let row" [ngClass]="'actionWidth'">
      <button mat-icon-button (click)="delete(row)">
        <mat-icon style="font-size: medium">delete</mat-icon>
      </button>
    </mat-cell>
  </ng-container>

  <mat-header-row *cdkHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *cdkRowDef="let row; columns: displayedColumns;"></mat-row>

</mat-table>
<div style="height:25px;padding-top: 5px;">
  <button mat-mini-fab (click)="addRow()" style="float:right;">+</button>
</div>
